<template>
  <div class="collecthome">
    <ContentBox title="商户收藏" @left="back" :fixed="true" @right="right" :ostyle="style" titlecolor="black">
      <template slot="oleft"><van-icon color="#000" name="arrow-left"/></template>
      <template slot="oright"><van-icon color="#000000"/>{{edit ? '完成' : '管理'}}</template>
    </ContentBox>
    <notice :top="$remToPx('0.88')"></notice>
    <van-checkbox-group class="collectcontent" v-model="result" ref="checkboxGroup">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <div class="item-container" v-for="(item,index) in collectList" :key="index">
          <van-checkbox :name="`${item.product_id}`" checked-color="#FE0000" v-if="edit"></van-checkbox>
          <van-image class="pic" :src="item.product.image" @click="toDetail(item.product.id)">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error></template>
          </van-image>
          <div class="detail" @click="toDetail(item.product.id)">
            <div class="title van-multi-ellipsis--l2">{{item.product.store_name}}</div>
            <p class="info">{{item.product.product_relation_count}}人收藏</p>
            <p class="price">￥{{item.product.price}}</p>
          </div>
        </div>
      </van-list>
    </van-checkbox-group>
    <!-- <div class="list">
      <h3 class="title">猜你喜欢</h3>
      <div class="shop-list">
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
          <van-cell v-for="(item,index) in recordList" :key="index" ref="reacd" class="list-detail">
            <readRcord :item="item"/>
          </van-cell>
        </van-list>
      </div>
    </div> -->
    <div class="collectfooter" v-if="edit">
      <van-checkbox name="all" v-model="allchecked" @click="checkedAll" checked-color="#FE0000">全选</van-checkbox>
      <div class="delete" @click="deleteColloct">删除</div>
    </div>
  </div>
</template>

<script>
// import readRcord from '@/components/readRcord'
export default {
  data () {
    return {
      style: {
        background: '#ffffff',
        color: '#000'
      },
      loading: false,
      finished: false,
      collectList: [],
      page: 1,
      last_page: 100,
      result: [],
      edit: 0,
      allchecked: 0
    }
  },
  // components: {
  // readRcord
  // },
  watch: {
    result (val) {
      if (val.length === this.collectList.length) {
        this.allchecked = 1
      } else {
        this.allchecked = 0
      }
    }
  },
  methods: {
    onLoad () {
      if (this.page >= this.last_page) {
        this.loading = false
        this.finished = true
        return false
      }
      this.loading = true
      this.finished = false
      setTimeout(_ => {
        this.page++
        this.$axios.get('/api/collect/user', {
          params: {
            page: this.page,
            limit: 10
          }
        }).then(res => {
          if (res.status === 200) {
            this.last_page = res.data.last_page
            for (let x in res.data.data) {
              this.collectList.push(res.data.data[x])
            }
          }
          this.loading = false
          this.finished = true
        })
      }, 1000)
    },
    right () {
      this.edit = !this.edit
    },
    getCollectList () {
      this.$axios.get('/api/collect/user', {
        params: {
          page: this.page,
          limit: 10
        }
      }).then(res => {
        if (res.status === 200) {
          this.collectList = res.data.data
        }
      })
    },
    checkedAll () {
      if (this.allchecked) {
        this.$refs.checkboxGroup.toggleAll()
      } else {
        this.$refs.checkboxGroup.toggleAll(true)
      }
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    },
    deleteColloct () {
      if (this.result.length <= 0) {
        return false
      } else {
        const idStr = this.result.join(',')
        this.$axios.post('/api/collect/batch_cancel_collect', {
          id: idStr
        }).then(res => {
          if (res.status === 200) {
            this.$dialog({ message: '已删除' })
            this.getCollectList()
          } else {
            this.$dialog({ message: res.msg })
            return false
          }
        })
      }
    },
    back () {
      if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('popVC')
      } else if (this.$store.state.pl === 'H5') {
        this.$router.go(-1)
      } else if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.finish()
      }
    }
  },
  created () {
    this.getCollectList()
  }
}
</script>

<style lang="scss">
@import './style.scss';
</style>
